{% extends 'layout/manage.html' %}
{% block title %}{% endblock %}

{% block css %}
    <style>
        .layui-row div {
            border: 1px solid #0C1021;

        }
    </style>
{% endblock %}

{% block content %}
    <div class="layui-container">
        <div class="layui-col-md8">
            <div id="chart" onclick="myChartDivClick()" style="width:115%;min-width:700px;min-height:400px">
            </div>
        </div>
    </div>

    <input id="csrf_token" value="{{ csrf_token }}" hidden="hidden"/>
{% endblock %}

{% block js %}
    <script>
        var myChart = echarts.init(document.getElementById("chart"));
        let axisData = ['版本0', 'v1', 'v2', 'stable单体', 'stable单体v1', '微服务', 'stable微服务v1', 'stable微服务v2'];
        let dataBase = 50
        const data = axisData.map(function (item, i) {
            return dataBase += 50;
        });
        console.log('data:{}', data)
        const links = data.map(function (item, i) {
            return {
                source: i,
                target: i + 1
            };
        });
        links.pop();
        option = {
            title: {
                text: '项目甘特图'
            },
            tooltip: {},
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: axisData
            },
            yAxis: {
                type: 'value',
                show: false,
                axisLabel: {
                    formatter: function () {
                        return "";
                    }
                }

            },
            dataZoom: [
                {
                    type: 'slider',
                    xAxisIndex: 0,
                    filterMode: 'none'
                },
                {
                    type: 'slider',
                    yAxisIndex: 0,
                    filterMode: 'none'
                },
                {
                    type: 'inside',
                    xAxisIndex: 0,
                    filterMode: 'none'
                },
                {
                    type: 'inside',
                    yAxisIndex: 0,
                    filterMode: 'none'
                }
            ],
            series: [
                {
                    type: 'graph',
                    layout: 'none',
                    coordinateSystem: 'cartesian2d',
                    symbolSize: 40,
                    label: {
                        show: true
                    },
                    edgeSymbol: ['circle', 'arrow'],
                    edgeSymbolSize: [4, 10],
                    data: data,
                    links: links,
                    lineStyle: {
                        color: '#2f4554'
                    }
                }
            ]
        };

        myChart.showLoading()
        myChart.setOption(option);
        myChart.hideLoading()

        function myChartDivClick() {
            layer.msg('chart div click')
        }

        let milestoneDates = null
        layui.use(function () {
            var util = layui.util;
            var layer = layui.layer;
            myChart.on("click", function (params) {
                let dataIndex = params.dataIndex;
                {#console.log('seriesIndex',seriesIndex)#}
                console.log('dataIndex', dataIndex)
                option.tooltip.show = false
                event.stopPropagation(); // 阻止事件冒泡
                layer.msg('chart click')
                let milestoneWindow = layer.open({
                    title: '请输入里程碑信息',
                    content:
                        '<div class="layui-form">' +
                        '<input type="text" required id="milestoneName" name="name" placeholder="里程碑名" class="layui-input">' +
                        ' <hr class="ws-space-16">' +
                        '<textarea required id="milestoneRemark" name="remark" placeholder="里程碑概述" class="layui-textarea"></textarea>' +
                        '</div>' +
                        ' <div class="layui-form-item">' +
                        ' <div class="layui-inline">' +
                        ' <hr class="ws-space-16">' +
                        '<label class="layui-form-label">周期</label>' +
                        '<div class="layui-inline" id="ID-laydate-rangeLinked">' +
                        ' <div class="layui-input-inline">' +
                        '<input required type="text" autocomplete="off" id="ID-laydate-start-date-1" class="layui-input" placeholder="开始日期">' +
                        '</div>' +
                        '<div class="layui-form-mid">-</div>' +
                        '<div class="layui-input-inline">' +
                        '<input required type="text" autocomplete="off" id="ID-laydate-end-date-1" class="layui-input" placeholder="结束日期">' +
                        '</div>' +
                        '</div>' +
                        '</div>' +
                        '</div>',
                    success: function (layero, index) {
                        layui.use(function () {
                            var laydate = layui.laydate;
                            // 日期范围 - 左右面板联动选择模式
                            laydate.render({
                                elem: '#ID-laydate-rangeLinked',
                                range: ['#ID-laydate-start-date-1', '#ID-laydate-end-date-1'],
                                rangeLinked: true, // 开启日期范围选择时的区间联动标注模式 ---  2.8+ 新增
                                done: function (value, date) {
                                    console.log('value ', value)
                                    milestoneDates = value
                                }
                            });
                        })
                    },
                    yes: function (value, index, elem) {
                        console.log('value', value)
                        console.log('index', index)
                        console.log('elem', elem)
                        let milestoneName = $("#milestoneName").val()
                        let milestoneRemark = $("#milestoneRemark").val()
                        console.log('milestoneName', milestoneName)
                        console.log('milestoneRemark', milestoneRemark)
                        console.log('milestoneDates', milestoneDates)
                        if (!milestoneName || !milestoneRemark || !milestoneDates) {
                            layer.msg('请填写完毕内容');
                            return
                        }
                        let mlstoneRecordLoading = layer.load(0);
                        layer.confirm('确定将' + milestoneDates + '的issues纳入到里程碑:\"' + milestoneName + '\"？', {
                            btn: ['确定', '关闭'] //按钮
                        }, function () {
                            {#layer.msg('第一个回调', {icon: 1});#}
                            $.ajax({
                                url: "{% url 'milestone_add' project_id=request.web.project.id %}",
                                type: "POST",
                                data: {
                                    "milestone_name": milestoneName,
                                    "milestone_remark": milestoneRemark,
                                    "milestone_date_range": milestoneDates,
                                    "csrfmiddlewaretoken": $("#csrf_token").val()
                                },
                                dataType: "JSON",
                                success: function (res) {
                                    console.log(res);
                                    if (res.status) {
                                        console.log("reload")
                                        location.reload();
                                    } else {

                                    }
                                }

                            })
                            layer.close(mlstoneRecordLoading)
                        }, function () {
                            layer.close(mlstoneRecordLoading)
                            {% comment %}   layer.msg('第二个回调', {
                                   time: 20000, // 20s 后自动关闭
                                   btn: ['明白了', '知道了']
                               });{% endcomment %}
                        });

                        {#layer.close(milestoneWindow)#}

                    },
                    end: function () {
                        //更新索引
                        {% comment %}if (typeof layer.escIndex === 'object') {
                            layer.escIndex.splice(0, 1);
                        }{% endcomment %}
                    }
                }, function (value, index, elem) {
                    console.log('value', value)
                    console.log('index', index)
                    console.log('elem', elem)
                    if (value === '') return elem.focus();
                    layer.msg('获得：' + util.escape(value)); // 显示 value
                    axisData[dataIndex] = util.escape(value)
                    refreshOptionWithMilestone(axisData)
                    // 关闭 prompt
                    layer.close(index);
                });
            });
        })

        function refreshOptionWithMilestone(milestoneData) {
            option.xAxis.data = milestoneData
            myChart.setOption(option)
            localStorage.setItem('milestoneData', milestoneData)
        }


    </script>
{% endblock %}